<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <script type="text/javascript" src="../static/js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="../static/js/common.js"></script>
    <script type="text/javascript" src="../static/js/echarts.min.js"></script>
    <style>
        html,body{width:100%;height:100%;}
        *{padding: 0px;margin: 0px;border:none;box-sizing: border-box}
        .title{
            text-align: center;
            margin:0 auto;
            padding: 15px;
        }
        .report{
            width:58%;float: left;
        }
        .report > div{
            width:100%;display: inline-block;
        }
        .kuai{
            width:38%;
            float: left;
        }
        .kuai ul{display:none;}

        .kuai .xk {
            width:100%;height:150px;position: relative;
        }
        .kuai .xk > span{
            font-size: 12px;color: #fff;position: absolute;left:15px;top:15px;
        }
        .kuai .xk > label{
            font-size: 30px;color: #fff;position: absolute;right:20px;top:60px;
        }
        
        .kuai .zk{
            background: #26a69a;width:100%;height:120px;color:#fff;position:relative;
        }
        
        .kuai .zk .xxk{
            position:absolute;    padding: 10px 10px 0px 10px;
        }
        
        .kuai .zk .xxk .label{
            font-size: 13px;
        }
        
        .kuai .zk .xxk .data{
            font-size: 13px;
        }

    </style>
</head>
<body style="background: #ecf0f5;padding: 10px;">
    <div class="title">
        <h2>欢迎使用惠上云进销存</h2>
        <p style="font-size: 12px;">点击左侧菜单进入相关功能，如有疑问请点击右上方的帮助按钮</p>
    </div>
    <div class="report">
        <div id="bar"></div>
    </div>
    <div class="kuai">
        <table cellspacing="15" style="width: 100%;">
            <tr>
                <td>
                    <div class="xk" style="background: #8BC34A;">
                        <span>今日采购总数</span>
                        <label>1</label>
                    </div>
                </td>
                <td>
                    <div class="xk" style="background: #00BCD4;">
                        <span>今日采购总额</span>
                        <label>2.00</label>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="xk" style="background: #BA68C8;">
                        <span>今日销售总数</span>
                        <label>3</label>
                    </div>
                </td>
                <td>
                    <div class="xk" style="background: #FFA726;">
                        <span>今日销售总额</span>
                        <label>4.00</label>
                    </div>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <div class="zk">
                        <div class="xxk">
                            <span class="left">库存总量：</span>
                            <span class="right">2</span>
                        </div>
                        <div class="xxk">
                            <span class="left">库存总量：</span>
                            <span class="right">2</span>
                        </div>
                        <div class="xxk">
                            <span class="left">库存总量：</span>
                            <span class="right">2</span>
                        </div>
                    </div>
                </td>
            </tr>
        </table>




        <ul>
            <li>
                <span class="left">库存总量：</span>
                <span class="right">2</span>
            </li>
            <li>
                <span class="left">库存成本：</span>
                <span class="right">12.00</span>
            </li>
            <li>
                <span class="left">销售收入(本月)：</span>
                <span class="right"></span>
            </li>
            <li>
                <span class="left">销售毛利(本月)：</span>
                <span class="right"></span>
            </li>
            <li>
                <span class="left">采购金额(本月)：</span>
                <span class="right"></span>
            </li>
            <li>
                <span class="left">商品种类(本月)：0</span>
                <span class="right"></span>
            </li>
            <li>
                <span class="left">客户欠款：</span>
                <span class="right"></span>
            </li>
            <li>
                <span class="left">供应商欠款：</span>
                <span class="right">12.00</span>
            </li>
            <li>
                <span class="left"></span>
                <span class="right"></span>
            </li>
            <li>
                <span class="left"></span>
                <span class="right"></span>
            </li>
        </ul>


    </div>


    <script>
        $(function(){
            initPage();
        });

        
        
        function initPage(){
            var height = $(document.body).height();
            $('#bar').height(height - 127 );
            $('.kuai .zk .xxk').width($('.kuai .zk').width()/3);
            
            init();
        }
        
        function init(){
            var dates = [],now = app.getServerTime(),interval = 86400000;
            for( var i=0 ; i<7 ; i++ ){
                dates.push(app.time2str(now));
                now -= interval;
            }
            dates.reverse();
            
            var bar = echarts.init(document.getElementById('bar'));
            var barOption = {
                color: ['#2EC7C9', '#B6A2DE', '#4cabce', '#e5323e'],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: '#999'
                        }
                    }
                },
                toolbox: {
                    feature: {
                        dataView: {show: true, readOnly: false},
                        magicType: {show: true, type: ['line', 'bar']},
                        restore: {show: true},
                        saveAsImage: {show: true}
                    }
                },
                legend: {
                    data:['销售','采购','库存']
                },
                xAxis: [
                    {
                        type: 'category',
                        data: dates,
                        axisPointer: {
                            type: 'shadow'
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: '销售采购数量',
                        interval: 50,
                        axisLabel: {
                            formatter: '{value} 件'
                        }
                    },
                    {
                        type: 'value',
                        name: '库存',
                        interval: 5,
                        axisLabel: {
                            formatter: '{value} 件'
                        }
                    }
                ],
                series: [
                    {
                        name:'销售',
                        type:'bar',
                        data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6]
                    },
                    {
                        name:'采购',
                        type:'bar',
                        data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6]
                    },
                    {
                        name:'库存',
                        type:'line',
                        yAxisIndex: 1,
                        data:[2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 11.3]
                    }
                ]
            };
            bar.setOption(barOption);
        }

        


    </script>
</body>
</html>